<template>
    <div class="md:flex">
        <template v-for="(item, index) in dataList" :key="item.title">
            <ChartCard :loading="loading" :title="item.title" :total="getTotal(item.total, index)" class="md:w-1/4 w-full !md:mt-0 !mt-4" :class="[index + 1 < 4 && '!md:mr-4']">
                <template #action>
                    <a-tooltip title="指标说明">
                        <Icon :icon="item.icon" :size="20"/>
                    </a-tooltip>
                </template>
                <div v-if="type==='chart'">
                    <Trend term="周同比" :percentage="12" v-if="index===0"/>
                    <Trend term="日同比" :percentage="11" v-if="index===0" :type="false"/>

                    <Line v-if="index===1" :option="option" :chartData="chartData" height="50px"></Line>

                    <Bar v-if="index===2" :option="option" :chartData="chartData" height="50px"></Bar>

                    <Progress v-if="index===3" :percent="78" :show-info="false"></Progress>
                </div>
                <div v-else>

                    <Line v-if="index===0" :option="option" :chartData="chartData" height="50px"></Line>

                    <Line v-if="index===1" :option="option" :chartData="chartData" height="50px"></Line>

                    <Bar v-if="index===2" :option="option" :chartData="chartData" height="50px"></Bar>

                    <Bar v-if="index===3" :option="option" :chartData="chartData" height="50px"></Bar>

                </div>
                <template #footer v-if="type==='chart'">
                    <span v-if="inde!==3">{{item.footer}}<span>{{item.value}}</span></span>
                    <Trend term="周同比" :percentage="12" v-if="index===3"/>
                    <Trend term="日同比" :percentage="11" v-if="index===3" :type="false"/>
                </template>
                <template #footer v-else>
                    <span>{{item.footer}}<span>{{item.value}}</span></span>
                </template>
            </ChartCard>
        </template>
    </div>
</template>
<script lang="ts" setup>
    import {ref, computed} from 'vue';
    import {Icon} from '/@/components/Icon';
    import {Progress} from 'ant-design-vue';
    import ChartCard from '/@/components/chart/ChartCard.vue';
    import Trend from '/@/components/chart/Trend.vue';
    import Bar from '/@/components/chart/Bar.vue';
    import Line from '/@/components/chart/Line.vue';
    import {chartCardList, bdcCardList} from '../data';

    const props = defineProps({
        loading: {
            type: Boolean,
        },
        type: {
            type: String,
            default: 'chart'
        },
    });
    const option = ref({xAxis: {show: false, boundaryGap: false}, yAxis: {show: false, boundaryGap: false, max: 220}});

    const chartData = ref([
        {
            "name": "1月",
            "value": 50
        },
        {
            "name": "2月",
            "value": 100
        },
        {
            "name": "3月",
            "value": 150
        },
        {
            "name": "4月",
            "value": 40
        },
        {
            "name": "5月",
            "value": 110
        },
        {
            "name": "6月",
            "value": 120
        }
    ])

    const dataList = computed(() => props.type === 'dbc' ? bdcCardList : chartCardList);

    function getTotal(total, index) {
        return index === 0 ? `￥${total}` : index === 3 ? `${total}%` : total;
    }
</script>
